<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="./lib/vue.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap.css">
</head>

<body>
  <div id="app">

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">添加品牌</h3>
      </div>
      <div class="panel-body form-inline">
        <label>
          Id:
          <input type="text" class="form-control" v-model="id">
        </label>
        <label>
          Name:
          <input type="text" class="form-control" v-model="name"  @keyup.f2="add">
        </label>
        <!-- 在vue中,使用事件绑定机制,为元素指定处理函数的时候,如何加了小括号,就可以给函数传参了 -->
        <input type="button" class="btn btn-primary" value="添加" @click="add">

        <label>
          搜索名称关键字:
          <input type="text" class="form-control" v-model="keywords" v-focus v-color="'green'">
        </label>
      </div>
    </div>

    <table class="table table-bordered tabel-hover table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Ctime</th>
          <th>Operation</th>
        </tr>
      </thead>
      <tbody>
        <!-- 原本遍历data中的list -->
        <!-- 现在根据查询条件显示数据需要添加方法进行处理显示 -->
        <tr v-for="item in search(keywords)" :key="item.id">
          <td>{{item.id}}</td>
          <td v-text="item.name"></td>
          <td>{{item.ctime | dataFormat }}</td>
          <td>
            <a href="" @click.prevent='del(item.id)'>删除</a>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
  <div id="app2">
    <h4 v-color="'pink'" v-fontweight="900" v-fontsize="30">{{ dt | dataFormat}}</h4>
  </div>
  <script>
    // 过滤器的定义语法
    // Vue.filter('过滤器名称',function(){})

    // 过滤器调用时候的格式 {{name | 过滤器的名称}}

    // 过滤器中的function, 第一个参数已经被规定死了, 永远都是过滤器管道前面传过来的的数据

    Vue.filter('dataFormat', function(dateStr,pattern="") {
        // 原生修改时间写法
        var dt = new Date(dateStr);
        // 转化成 yyyy-mm-dd
        var y = dt.getFullYear();
        var m = dt.getMonth() + 1;
        var d = dt.getDate();
        // 使用字符串模板进行拼接

        if(pattern.toLowerCase() === 'yyyy-mm-dd'){
          return `${y}-${m}-${d}`;
        } else {
          var hh = dt.getHours();
          var mm = dt.getMinutes();
          var ss = dt.getSeconds();

          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
        }
    })

    // 自定义全局按键修饰符
    Vue.config.keyCodes.f2 = 113;

    // 定义全局的指令
    // 参数一指令的名称(不需要加v-,调用时需要加v-)
    // 参数二是一个对象,这个对象上有些指令相关的函数,这些函数在特定的阶段执行相关的操作
    Vue.directive('focus',{
      bind: function(el){ // 每当指令绑定到元素上的时候,会立即执行bind函数,只执行一次
        // 注意: 在每个函数中,第一个参数永远是el, 表示被绑定了指令的那个元素(这个元素是原生的js对象)
        // 在元素刚刚绑定指令的时候,还没有插入到dom中去,调用focus方法没有作用
        // 因为一个元素只有插入dom之后才能获取焦点
        //el.focus();
      },
      inserted: function(el){// inserted 表示元素插入到dom中的时候,会执行insert函数,只执行一次
        el.focus();
        // 和 js行为相关的操作在inserted中执行
      },
      updated: function(){// 当VNode更新的时候,会执行 updated, 可能会触发多次

      }
    })

    //  自定义设置字体颜色的指令
    Vue.directive('color',{
      // 样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有内联样式

      // 和样式相关的操作在bind中执行
      bind: function(el,binding){
        //el.style.color = 'red'
        // console.log(binding.name);
        // console.log(binding.value);
        // console.log(binding.expression);
        el.style.color = binding.value;
      }
    })

    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [{
            id: 1,
            name: '奔驰',
            ctime: new Date()
          },
          {
            id: 2,
            name: '宝马',
            ctime: new Date()
          },
          {
            id: 3,
            name: '奥迪',
            ctime: new Date()
          }
        ],
        keywords: '' // 搜索的关键字
      },
      methods: {
        add() { // 添加的方法
          // 过程分析
          // 1. 获取id和name
          // 2. 组成对象
          // 3. 把对象调用数组的相关方法,添加到当前data上的list中
          var car = {
            id: this.id,
            name: this.name,
            ctime: new Date()
          };
          this.list.push(car);
          this.id = this.name = '';
        },
        del(id) { // 根据id删除数据
          // 过程分析
          // 1. 如何根据id,找到删除这一项的索引
          // 2. 如果找到索引, 直接调用数组的splice方法
          this.list.some((item, i) => {
            if (item.id == id) {
              // splice() 向数组添加或删除项目
              this.list.splice(i, 1)
              // 在数组的方法中,如果return true, 就会立即终止数组的循环
              return true;
            }
          })

          // 第二种方式
          // var index = this.list.findIndex(item => {
          //     if(item.id == id){
          //         return true;
          //     }
          // });
          //
          // this.list.splice(index,1);

        },
        search(keywords) { // 根据关键字进行数据的搜索
          //   var newList = [];
          //   this.list.forEach(item => {
          //     if(item.name.indexOf(keywords) != -1) {
          //       newList.push(item);
          //     }
          //   })
          //   return newList;
          // }

          // 注意: forEach some filter findIndex 这些都属于数组的新方法
          // 都会对数组中的每一项进行遍历,执行相关的操作
          return this.list.filter(item => {
            // ES6 中,为字符串提供了一个新的方法,叫 String.prototype.includes('要包含的字符串')
            // 如果包含,则返回true,否则返回false
            if (item.name.includes(keywords)) {
              return item;
            }
          })
        }
      }
    });


    var vm2 = new Vue({
      el: '#app2',
      data: {
        dt: new Date()
      },
      methods: {

      },
      filters:{ // 定义私有过滤器, 两个条件: [过滤名称 和 处理函数]
        // 过滤器调用的时候才用就近原则
        dataFormat: function(dateStr,pattern=""){
          // 原生修改时间写法
          var dt = new Date(dateStr);
          // 转化成 yyyy-mm-dd
          // 使用字符串填充函数padStart()在字符串头部进行填充(padEnd在尾部进行填充)
          // padStart(位数,填充的字符串)
          var y = dt.getFullYear();
          var m = (dt.getMonth() + 1).toString().padStart(2,'0');
          var d = dt.getDate().toString().padStart(2,'0');
          // 使用字符串模板进行拼接

          if(pattern.toLowerCase() === 'yyyy-mm-dd'){
            return `${y}-${m}-${d}`;
          } else {
            var hh = dt.getHours().toString().padStart(2,'0');
            var mm = dt.getMinutes().toString().padStart(2,'0');
            var ss = dt.getSeconds().toString().padStart(2,'0');

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
          }
        }
      },
      directives: { // 自定义私有指令
        'fontweight': {
          bind: function(el,binding) {
            el.style.fontWeight = binding.value;
          }
        },
        'fontsize': function(el,binding){ //这个function等于把代码写到bind和update中去
          el.style.fontSize = parseInt(binding.value) + 'px';
        }
      }
    })
  </script>



</body>

</html>
